<template>
  <div>
    <el-row>
      <el-col :span="13" :md="{ span: 18 }">
        <el-input class="input" placeholder="请输入内容"></el-input>
        <el-button icon="el-icon-search" :class="theme"></el-button>
      </el-col>
      <el-col :span="2" :md="{ span: 1 }">
        <div class="margin">
          <div class="change-icon">
            <i class="el-icon-s-opportunity"></i>
            <div class="redbox">3+</div>
          </div>
        </div>
      </el-col>
      <el-col :span="2" :md="{ span: 1 }">
        <div class="margin">
          <div class="change-icon">
            <i class="el-icon-message"></i>
            <div class="redbox">7</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" :md="{ span: 3 }">
        <div class="Douglas"> Douglas McGee</div>
        <div class="mess" v-show="isvisible">
          <el-button class="button" icon="el-icon-user-solid">
            Profile
          </el-button>
          <el-button class="button" icon="el-icon-s-tools">
            Settings
          </el-button>
          <el-button class="button button_border" icon="el-icon-s-operation" @click="changtheme">
            Activity Log
          </el-button>
          <div class="border"></div>
          <el-button class="button button_border" icon="el-icon-back" @click="dialogVisible = true">
            Logout
          </el-button>
        </div>
      </el-col>
      <el-col :span="2" :md="{ span: 1 }">
        <img :src="imgUrl" alt="" srcset="" class="user" @click="hide" />
      </el-col>
    </el-row>
    <el-dialog class="text" title="Ready to Leave?" :visible.sync="dialogVisible" width="30%">
      <span class="spantext">Select "Logout" below if you are ready to end your current session.</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="info">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Logout</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import imgPath from "../assets/picture/touxiang.jpg"
export default {
  name: 'mHeader',
  data() {
    return {
      imgUrl: imgPath,
      isvisible: false,
      dialogVisible: false,
      theme: '',
    }
  },
  computed: {
    changetheme() {
      return this.$store.state.theme
    }
  },
  watch: {
    changetheme: {
      handler(newval) {
        this.theme = newval
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    hide() {
      this.isvisible = !this.isvisible
    },
    changtheme() {
      this.$store.commit('changeThemeColor', 'theme_green')
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/less/theme.less';
@--color:#000;
.input {
  width: 50% !important;
  margin-top: 10px;
}

.margin {
  margin: 20px 15px 15px 0;
}

.Douglas {
  color: rgb(133, 135, 150);
  cursor: pointer;
  font-family: Nunito;
  font-size: 12.8px;
  font-weight: 400;
  margin-top: 20px;
  padding-left: 20px;
  border-left: 1px solid rgb(221, 218, 218);
}

.border {
  width: 100%;
  height: 1px;
  background-color: rgb(233, 230, 230);
}

.user {
  width: 32px;
  height: 32px;
  border: 1px solid rgb(183, 185, 204);
  border-radius: 50% !important;
  line-height: 40px;
  margin-top: 10px;
}

.change-icon {
  font-size: 20px;
  border: 0px;
  position: absolute;
  z-index: 10;
  color: rgb(183, 185, 204);
}

.redbox {
  width: 15px;
  height: 14px;
  background-color: rgb(231, 74, 59);
  font-size: 10px;
  font-weight: 700;
  font-family: Nunito;
  color: rgb(255, 255, 255);
  border-radius: 4px;
  float: right;
  position: absolute;
  top: 0;
  left: 13px;
  z-index: 11;
  text-align: center;
}

.mess {
  box-shadow: 0px 0px 5px 5px rgba(232, 232, 232, 0.4);
  width: 140px;
  height: 150px;
  background-color: rgb(254, 254, 254);
  border: 0px solid rgb(136, 139, 157);
  position: absolute;
  right: 0px;
  top: 64px;
  z-index: 11;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  text-align: center;
  color: rgb(183, 185, 204);
  font-family: Nunito;
  font-size: 11px;
  font-weight: 800;
  line-height: 25px;
}

.button {
  color: rgb(95, 96, 104);
  border: 0;
  width: 150px;
  text-align: left;
  margin-left: 0px !important;
}

.text {
  color: rgb(133, 135, 150);
  font-family: Nunito;
  font-size: 20px;
  font-weight: 400
}

.spantext {
  font-size: 16px
}
</style>